<script lang="jsx" setup>
import { ref } from 'vue';
import Form from '@/components/common/form.vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

console.log('props.rowData:', props.rowData);

function getModal() {
  if (props.rowData) {
    const { checkResult, checkDesc } = props.rowData;
    return { checkResult, checkDesc };
  }
  return {
    checkResult: null,
    checkDesc: null
  };
}

const model = ref(getModal());

const formList = [
  {
    type: 'tabs',
    name: '基本信息',
    span: 24
  },
  {
    type: 'radio',
    key: 'checkResult',
    label: '确认结果',
    span: 24,
    rule: {
      required: true,
      message: '请选择确认结果',
      trigger: 'change'
    },
    selectOptions: [
      {
        label: '通过',
        value: '1'
      },
      {
        label: '不通过',
        value: '2'
      }
    ]
  },

  {
    type: 'textarea',
    key: 'checkDesc',
    label: '验证备注',
    placeholder: '请输入验证备注',
    span: 24
  }
];

const formRef = ref(null);

async function validateForm() {
  await formRef.value.validateForm();
}

defineExpose({
  model: model.value,
  validateForm
});
</script>

<template>
  <div class="event-form">
    <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
  </div>
</template>

<style lang="scss" scoped></style>
